<template>
	<view class="wrap">
		<view class="top" v-for="(item,index) in info.details">
			<view class="u-flex ">
				<view class="u-flex-2 bookInfo">
					<u-image width="150rpx" height="150rpx" :src="vuex_user.store + item.book.img"  border-radius="20"></u-image>
				</view>
				<view class="u-flex-6">
					<view class="u-line-1" style="font-size: 28rpx; width: 400rpx;">
						{{item.book.name}}
					</view>
					<view class="u-line-1" style="font-size: 28rpx; width: 400rpx; color: #909399;">
						作者：{{item.book.author}}
					</view>
				</view>
			</view>
			<view class="u-p-b-40">
				<view v-if="isOperate" style="margin-top: 40rpx;font-size: 28rpx;">
					<text>{{userEvaluate[index]}}</text>
				</view>
				<view v-else>
					<textarea  v-model="userEvaluate[index]" type="text" placeholder-class="line" placeholder="已经用了一段时间了,有更多宝贝使用心得？分享给想买的他们吧"   style="margin-top: 40rpx;height: 250rpx;font-size: 28rpx;"/>
				</view>
			</view>
			<view class="rate">
				评分：<u-rate :count="5" v-model="starValue[index]"  :disabled="isOperate" :min-count="1"></u-rate>
			</view>
			
		</view>
		<view>
			<view v-show="!isOperate">
				<u-button type="warning" :disabled="!userEvaluate.every(item => item!=null && item!='')"  @click="comment" >发表评论</u-button>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				oid:0,
				info:{},
				userEvaluate:[],
				starValue:[],
				did:[],
				isOperate:false,
				comments:[]
			}
		},
		onLoad(val){
			console.log(val)
			this.oid = val.oid
			
			this.getOrderInfo(val.oid)
		},
		methods: {
			
			async comment(){
				if(!this.starValue.every(item => item!=0)){
					this.$u.toast("请给每个商品打个评分吧")
					return
				}
				for (var i = 0; i < this.did.length; i++) {
					this.comments[i] = {
						content:this.userEvaluate[i],
						did:this.did[i],
						start:this.starValue[i]
					}
				}
				
				const params={
					comments:this.comments
				}
				console.log(params)
				const res = await this.$u.api.comments(params)
				console.log(res)
				if(res == null){
					this.$u.toast("评论成功")
					setTimeout(()=>{
						this.$u.route({
							delta:1,
							type:'back',
							
						})
					},1000)
				}
				
				
				
				// for (var i = 0; i < this.did.length; i++) {
				// 	const params={
				// 		content:this.userEvaluate[i],
				// 		did:this.did[i],
				// 		start:this.starValue[i]
				// 	}
					
				// 	const res = await this.$u.api.comment(params)
				// 	if(res == null){
				// 		this.$u.toast("评论成功")
				// 		setTimeout(()=>{
				// 			this.$u.route({
				// 				type:'reLaunch',
				// 				url:'/pages/center/allOrder'
				// 			})
				// 		},1000)
				// 	}
				// }
				
			},
			async getOrderInfo(val){
				
				const res = await this.$u.api.getOrderDetail(val)
				console.log(res)
				if(res!=null){
					this.info = res
					for (var i = 0; i < res.details.length; i++) {
						this.did[i] = res.details[i].id
						if(res.details[i].comment!=null){
							this.starValue[i] = res.details[i].comment.star 
							this.userEvaluate[i] = res.details[i].comment.content 
							this.isOperate = true
						}else{
							this.starValue[i] = 0
							this.userEvaluate[i] = ''
						}
						
					}
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrap{
		width: 80%;
		
		margin: 20rpx auto;
		border-radius: 20rpx;
		background-color: #f3f4f6;
		
	}
	.bookInfo{
		margin: 20rpx 20rpx;
		
	}
	.rate{
		
		margin: 10rpx auto;
	}
</style>
